<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏 - H5版本</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .game-container {
            background: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            max-width: 500px;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 2.5em;
        }
        
        .game-output {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 20px;
            margin: 20px 0;
            min-height: 200px;
            text-align: left;
            font-size: 16px;
            line-height: 1.6;
            overflow-y: auto;
            max-height: 300px;
        }
        
        .input-group {
            display: flex;
            gap: 10px;
            margin: 20px 0;
            justify-content: center;
        }
        
        input[type="number"] {
            padding: 12px;
            border: 2px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            width: 150px;
            text-align: center;
        }
        
        button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #007bff;
            color: white;
        }
        
        .btn-primary:hover {
            background: #0056b3;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #545b62;
            transform: translateY(-2px);
        }
        
        .btn-success {
            background: #28a745;
            color: white;
        }
        
        .btn-success:hover {
            background: #1e7e34;
            transform: translateY(-2px);
        }
        
        .controls {
            margin-top: 20px;
        }
        
        .status {
            margin-top: 15px;
            padding: 10px;
            border-radius: 5px;
            font-weight: bold;
        }
        
        .status.running {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        
        .status.stopped {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        
        .game-info {
            margin-top: 15px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>🎯 猜数字游戏</h1>
        
        <div class="game-output" id="gameOutput">
            点击"开始游戏"来启动猜数字游戏！<br>
            我会想一个1-100之间的数字，你来猜猜看～
        </div>
        
        <div class="input-group">
            <input type="number" id="guessInput" placeholder="输入数字" min="1" max="100">
            <button class="btn-primary" onclick="submitGuess()">提交猜测</button>
        </div>
        
        <div class="controls">
            <button class="btn-success" onclick="startGame()">开始游戏</button>
            <button class="btn-secondary" onclick="stopGame()">停止游戏</button>
            <button class="btn-secondary" onclick="clearOutput()">清空输出</button>
        </div>
        
        <div class="status stopped" id="gameStatus">游戏未运行</div>
        
        <div class="game-info">
            <p>游戏规则：我会想一个1-100之间的数字，你来猜这个数字是多少。</p>
            <p>每次猜测后，我会告诉你猜的数字是太大还是太小，直到你猜对为止！</p>
        </div>
    </div>

    <script>
        let gameRunning = false;
        let targetNumber = 0;
        let attempts = 0;
        
        function startGame() {
            if (!gameRunning) {
                gameRunning = true;
                targetNumber = Math.floor(Math.random() * 100) + 1;
                attempts = 0;
                updateStatus('游戏运行中...', true);
                clearOutput();
                appendToOutput('欢迎玩猜数字游戏！<br>');
                appendToOutput('我已经想好了一个 1-100 之间的数字，快来猜猜看吧～<br>');
                document.getElementById('guessInput').focus();
            }
        }
        
        function stopGame() {
            if (gameRunning) {
                gameRunning = false;
                updateStatus('游戏已停止', false);
                appendToOutput('<br><span style="color: blue;">游戏已停止</span>');
                if (targetNumber > 0) {
                    appendToOutput('<br><span style="color: orange;">答案是：' + targetNumber + '</span>');
                }
            }
        }
        
        function submitGuess() {
            if (!gameRunning) {
                appendToOutput('<span style="color: red;">请先开始游戏！</span><br>');
                return;
            }
            
            const input = document.getElementById('guessInput');
            const guess = parseInt(input.value.trim());
            
            if (isNaN(guess)) {
                appendToOutput('<span style="color: red;">输入无效！请输入一个整数～</span><br>');
                return;
            }
            
            if (guess < 1 || guess > 100) {
                appendToOutput('<span style="color: red;">请输入 1-100 之间的数字哦！</span><br>');
                return;
            }
            
            attempts++;
            appendToOutput('你的猜测: ' + guess + '<br>');
            
            if (guess < targetNumber) {
                appendToOutput('猜小了～再试试！<br>');
            } else if (guess > targetNumber) {
                appendToOutput('猜大了～再试试！<br>');
            } else {
                appendToOutput('<span style="color: green;">恭喜你！猜对了！答案就是 ' + targetNumber + '！</span><br>');
                appendToOutput('<span style="color: green;">你总共猜了 ' + attempts + ' 次～</span><br>');
                gameRunning = false;
                updateStatus('游戏完成', false);
            }
            
            input.value = '';
            input.focus();
        }
        
        function clearOutput() {
            document.getElementById('gameOutput').innerHTML = '';
        }
        
        function appendToOutput(text) {
            const output = document.getElementById('gameOutput');
            output.innerHTML += text;
            output.scrollTop = output.scrollHeight;
        }
        
        function updateStatus(text, isRunning) {
            const status = document.getElementById('gameStatus');
            status.textContent = text;
            status.className = 'status ' + (isRunning ? 'running' : 'stopped');
        }
        
        // 支持回车键提交
        document.getElementById('guessInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                submitGuess();
            }
        });
        
        // 页面加载完成后自动聚焦输入框
        window.addEventListener('load', function() {
            document.getElementById('guessInput').focus();
        });
    </script>
</body>
</html>